<template>
  <div class="bg">
    <div class="login">
      <div class="login-form-content">
        <div class="login-form">
          <div class="topimg">
            <h2 class="title">云友批发</h2>
          </div>
          <div style="margin-top:20px"></div>
          <a-form layout="vertical">
            <a-form-item v-bind="validateInfos.account" label="用户名">
              <a-input size="large" v-model:value="loginForm.account" placeholder="请输入用户名" />
            </a-form-item>
            <a-form-item v-bind="validateInfos.password" label="密码">
              <a-input
                type="password"
                v-model:value="loginForm.password"
                placeholder="请输入密码"
              />
            </a-form-item>
            <a-form-item v-bind="validateInfos.url" label="域名">
              <a-input size="large" v-model:value="loginForm.url" placeholder="请输入域名" />
            </a-form-item>
          </a-form>
          <div class="login-form-operations">
            <a-button :loading="loginLoading" block type="primary" @click.prevent="handleSubmit">
              登录
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  inject,
  reactive,
  ref,
  toRaw,
} from 'vue';

import {
  Form,
  message,
} from 'ant-design-vue';
import { useRouter } from 'vue-router';

import { loginIn } from '@/api/data';

const loginLoading = ref(false);
const useForm = Form.useForm;
const router = useRouter();
// const store = useStore();
const loginForm = reactive({
  account: "15555555555",
  password: "15555555555",
  url: "https://ceshiweb.picaime.com"
});

const { resetFields, validate, validateInfos } = useForm(
  loginForm,
  reactive({
    account: [
      {
        required: true,
        message: "请填写用户名",
      },
    ],
    password: [
      {
        required: true,
        message: "请填写密码",
      },
    ],
  })
);

const handleSubmit = () => {
  validate()
    .then((res) => {
      //模拟假登录
      // let auth = res.account
      // store.commit('auth/GENERATE_ROUTES', auth)
      // store.commit('auth/SET_AUTH', auth)
      // router.push('/home')
      loginLoading.value = true;
      loginIn(toRaw(loginForm))
        .then((res) => {
          const { token, account, userInfo } = res;
          console.log(res);
          window.localStorage.setItem("token", token);
          message.success("登录成功");
          // window.localStorage.setItem("account", account);
          // window.localStorage.setItem("userInfo", JSON.stringify(userInfo));
          router.replace("/cashier");
          loginLoading.value = false;
        })
        .catch((err) => {
          loginLoading.value = false;
          console.log(err);
        });
    })
    .catch((err) => {
      console.log("error", err);
    });
};
const handleReset = () => {
  resetFields();
};
</script>

<style scoped lang="scss">
.bg {
  width: 1920px;
  height: 1080px;
  background: url("../../assets/img/bg.png") no-repeat 100% 100%;
  background-size: cover;
}
.login {
  // background-color:;
  width: 1920px;
  height: 1080px;
  // background-color: rgba(0, 0, 0, 0.5);
  .login-header {
    height: 50px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    border: 1px solid #e8e8e8;

    .lang-menu {
      margin-right: 30px;
    }
  }

  .login-form-content {
    height: calc(100% - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    .topimg {
      display: flex;
      flex-direction: column;
      align-items: center;
      .title {
        text-align: center;
        margin-bottom: 0;
      }
      .top {
        width: 200px;
      }
    }

    .login-form {
      width: 360px;
      // height: 290px;
      border: 1px solid #fff;
      border-radius: 15px !important;
      border-radius: 4px;
      padding: 40px;
      background: rgba(255, 255, 255);
      // -webkit-backdrop-filter: blur(10px);
      // backdrop-filter: blur(10px);
      transform: scale(1.3);
      // position: fixed;
      // right: 100px;
      // bottom: 100px;
      .title {
        text-align: letf;
      }

      .login-control {
        display: flex;
        justify-content: space-between;
      }

      .login-form-operations {
        .ant-btn {
          margin: 8px 0;
        }
      }
    }
  }
}
</style>
